<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100%;
        }

        #allmap {
            width: 100%;
            height: 100%;
            overflow:hidden;
            overflow-x: hidden;
        }

        .toolbar {
            height: 35px;
            line-height: 35px;
            font-size: 12px;
            padding-left: 8px;
            position: absolute;
            width:100%;
            top:0;
            left:0;
            z-index:99999;
            background:#f2f2f2;
        }

        .ipt {
            width: 180px;
            padding: 5px;
            height: 28px;
            line-height: 28px;
            border: 1px solid #D9D9D9;
            font-size: 12px;
            color: #777;
            background: #fff;
        }

        .btn {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            *overflow: visible;
            padding: 0 12px;
            height: 28px;
            border: 1px solid #EDEDED;
            font-size: 12px;
            text-align: center;
            cursor: pointer;
            background: #f4f4f4;
        }

        #msg {
            color: #e1b203;
            margin-left: 20px;
        }
    </style>
    <script type="text/javascript" src="/public/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="/public/plugins/zeroClipboard/ZeroClipboard.min.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=tEiluOXWK2R8LXIYA1BLmTb1p3wxfZoU"></script>
    <title>坐标拾取器</title>
</head>
<body>
<div class="toolbar">
    检索地址：
    <select id="pro" class="ipt" style="width:120px;">
        {volist name="proList" id="vo"}
        <option value="{$vo.area_name}">{$vo.area_name}</option>
        {/volist}
    </select>
    <input type="text" id="address" class="ipt" placeholder="查询地区"/>
    <button type="button" class="btn" onclick="search();">搜索</button>
    <div style="float:right">
        <input type="text" id="pos" class="ipt"/>
        <button type="button" class="btn" id="copy" data-clipboard-target="pos">复制</button>
    </div>
</div>
<div id="allmap">

</div>
<script type="text/javascript">
    $(document).ready(function(){
        var clip = new ZeroClipboard($("#copy"));
        $('#copy').click(function () {
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(index);
        });
    });
    // 百度地图API功能
    var marker;
    var map = new BMap.Map("allmap", {enableMapClick: false});
    // 添加带有定位的导航控件
    var navigationControl = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT, // 靠左上角位置
        type: BMAP_NAVIGATION_CONTROL_LARGE, // LARGE类型
        enableGeolocation: true // 启用显示定位
    });
    map.enableScrollWheelZoom(true);
    map.addControl(navigationControl);
    $("#pro").change(function () {
        var pro = $(this).val();
        map.centerAndZoom(pro, 15);
    });
    map.addEventListener("click", function (e) {
        addMarker(e.point);
    });
    $("#pro").trigger("change"); //加载触发
    //创建标注
    function addMarker(point) {
        map.clearOverlays();
        marker = new BMap.Marker(point);
        map.addOverlay(marker);
        var pos = point.lng + ',' + point.lat;
        $('#pos').val(pos);
    }
    //搜索
    function search() {
        // 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
        var addr = $("#address").val();
        var prov = $('#pro').val();
        // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint(addr, function (point) {
            if (point) {
                map.centerAndZoom(point, 15);
                addMarker(point);
            } else {
                $('#pos').text('未查找到指定位置，请手工指定！');
            }
        }, prov);
    }
</script>
</body>
</html>